
.home{
  width: 100%;
  .title{

  }
  .home-page{
    box-sizing: border-box;
    img{
      width: 100%;
      display: block;
    }
    height: 99.8vh;
    width: 100%;
    position: relative;
    .content{
      position: absolute;
      top: 0;
      left: 0;
      width: 50%;
      height: 99.8%;
      background-color:#ec6126;
      .official{
        h2{
          font-size: 28px;
        }
        .offh{
          font-size: 40px;
        }
        margin-top: 40%;
        padding: 20px;
       
        color: #ffffff;
        text-align: right;
        width: 100%;
        img{

          width: 50px;
          display: inline-block;
        }
        .h3{
          width: 100%;
         
        }
      }
    }
    .pic{
      position: absolute;
      bottom: 0.2vh;
      right: 0;
      width: 50%;
      height: 99.8%;
      background-color:black;
    }





















    .rsite-enter-to {
      bottom: 0;
      right: 0;
      width: 50%;
      height: 99.8%;
    }
  
    .lsite-enter-to{
      top: 0;
      left:  0;
      width: 50%;
      height: 99.8%;
    }
    .rsite-enter-active,.lsite-enter-active{
      transition: ease 2s all;
    }
    .rsite-enter{
      width: 50%;
      height: 0;
      right: 0;
      bottom: -100vh;
    }
    .lsite-enter{
      width: 50%;
      height: 0;
      left:0;
      top: -100%;
    }
  }
  
}

